<template>
  <div class="dialog-box" style="position: relative">
    <el-scrollbar class="custom-scroll content-box">
      <el-form
        ref="formEditPersonnelBasicRef"
        :model="formData"
        :size="layoutStore.defaultFormItemSize"
        :rules="rules"
        label-width="150px"
        label-position="right"
        @submit.prevent
      >
        <el-row :gutter="16">
          <el-col :span="24">
            <el-tabs modelValue="basic">
              <el-tab-pane label="基本信息" name="basic" :lazy="true">
                <el-row :gutter="16">
                  <el-col :span="24">
                    <el-form-item label="照片" prop="PersonnelBasic.zp">
                      <custom-upload
                        v-model="zpWidgetFileList"
                        name="uploadFile"
                        :size="layoutStore.defaultFormItemSize"
                        type="dropdown"
                        :headers="getUploadHeaders"
                        :action="getUploadActionUrl('/admin/app/personnelBasic/upload')"
                        :data="{fieldName: 'zp', asImage: false}"
                        :limit="zpWidgetMaxCount"
                        :multiple="false"
                        accept=".png,.jpg,.jpeg,.bmp"
                        @change="onZpChange"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="姓名" prop="PersonnelBasic.xm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.xm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="英文姓名" prop="PersonnelBasic.ywxm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.ywxm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别码" prop="PersonnelBasic.xbm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.xbm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="出生日期" prop="PersonnelBasic.csrq">
                      <el-date-picker
                        class="input-item"
                        v-model="formData.PersonnelBasic.csrq"
                        type="date"
                        placeholder=""
                        :clearable="true"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="出生地码" prop="PersonnelBasic.csdm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.csdm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="户口类别码" prop="PersonnelBasic.hklbm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.hklbm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="籍贯" prop="PersonnelBasic.jg">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.jg"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="户口所在地详细地址" prop="PersonnelBasic.hkszdxxdz">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.hkszdxxdz"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="户口所在地行政区划码" prop="PersonnelBasic.hkszdxzqhm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.hkszdxzqhm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="当前住址详细地址" prop="PersonnelBasic.dqzzxxdz">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.dqzzxxdz"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="民族码" prop="PersonnelBasic.mzm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.mzm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="当前住址邮政编码" prop="PersonnelBasic.dqzzyzbm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.dqzzyzbm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="身份证件类型码" prop="PersonnelBasic.sfzjlxm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.sfzjlxm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="身份证件号" prop="PersonnelBasic.sfzjh">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.sfzjh"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="婚姻状况码（中小学不用填写）" prop="PersonnelBasic.hyzkm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.hyzkm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="当前住址行政区划码" prop="PersonnelBasic.dqzzxzqhm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.dqzzxzqhm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="国籍/地区码" prop="PersonnelBasic.gjdqm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.gjdqm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="信仰宗教码" prop="PersonnelBasic.xyzjm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.xyzjm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="血型码" prop="PersonnelBasic.xxm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.xxm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="港澳台侨外码" prop="PersonnelBasic.gatqwm">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.gatqwm"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否独生子女" prop="PersonnelBasic.sfdszn">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.sfdszn"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="宅电" prop="PersonnelBasic.zd">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.zd"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话" prop="PersonnelBasic.lxdh">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.lxdh"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="人员号" prop="PersonnelBasic.ryh">
                      <el-input
                        class="input-item"
                        v-model="formData.PersonnelBasic.ryh"
                        type="text"
                        placeholder=""
                        :clearable="true"
                        :show-word-limit="false"
                        maxlength=""
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="学习经历" name="study" :lazy="true">
                <el-row :gutter="16">
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="教育经历" name="cmedu" :lazy="true">
                <el-row :gutter="16">
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-row class="footer-box" type="flex" justify="end" align="middle">
      <el-button :size="layoutStore.defaultFormItemSize" @click="onCancel()">取消</el-button>
      <el-button :size="layoutStore.defaultFormItemSize" type="primary" @click="onSubmitPersonnelBasicClick()">保存</el-button>
    </el-row>
  </div>
</template>

<script lang="ts">
export default {
  name: 'formEditPersonnelBasic',
};
</script>

<script setup lang="ts">
import { DialogProp } from '@/components/Dialog/types';
import * as validateRules from '@/common/utils/validate';
import { VxeColumn, VxeTable } from 'vxe-table';
import { ANY_OBJECT } from '@/types/generic';
import { DictData, DictionaryBase } from '@/common/staticDict/types';
import { ElMessage, ElMessageBox, UploadFile } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { useCommon } from '@/common/hooks/useCommon';
import { useLayoutStore, useStaticDictStore } from '@/store';
import { useDownload } from '@/common/hooks/useDownload';
import { useDropdown } from '@/common/hooks/useDropdown';
import { DropdownOptions, ListData } from '@/common/types/list';
import { useTable } from '@/common/hooks/useTable';
import { TableOptions } from '@/common/types/pagination';
import { useUpload } from '@/common/hooks/useUpload';
import { useUploadWidget } from '@/common/hooks/useUploadWidget';
import { DictionaryController } from '@/api/system';
import { treeDataTranslate, findItemFromList, findTreeNodePath, findTreeNode, stringCase } from '@/common/utils';
import { PersonnelBasicData } from '@/api/generated/personnelBasicController';
import { PersonnelBasicController } from '@/api/generated';
import DeptSelect from '@/components/DeptSelect/index.vue';
import UserSelect from '@/components/UserSelect/index.vue';

const router = useRouter();
const route = useRoute();
const layoutStore = useLayoutStore();
const { downloadFile } = useDownload();
const { getUploadHeaders, getUploadActionUrl, fileListToJson, parseUploadData, getPictureList } = useUpload();
const { 
  Delete,
  Search,
  Edit,
  Plus,
  Refresh,
  Picture,
  Dialog,
  mainContextHeight,
  clientHeight,
  checkPermCodeExist,
  parseParams,
  parseArrayParams,
  formatDateByStatsType,
  getDateRangeFilter,
} = useCommon();
// 静态字典
const { staticDict: StaticDict } = useStaticDictStore();

const props = withDefaults(
  defineProps<{
    subPage?: number | string | boolean;
    id?: ANY_OBJECT;
    saveOnSubmit?: boolean;
    rowData?: ANY_OBJECT;
    // 当使用Dialog.show弹出组件时，须定义该prop属性，以便对dialog进行回调
    dialog?: DialogProp<ANY_OBJECT[]>;
  }>(),
  {
    subPage: 0,
    id: undefined,
    saveOnSubmit: true,
    rowData: undefined,
    dialog: undefined,
  },
);

const formEditPersonnelBasicRef = ref();
// 表单数据定义
type FormEditPersonnelBasicData = {
  PersonnelBasic: PersonnelBasicData;
};
// 表单数据
const formData = reactive<FormEditPersonnelBasicData>({
  PersonnelBasic: {
    // ID
    id: undefined,
    // 姓名
    xm: undefined,
    // 英文姓名
    ywxm: undefined,
    // 性别码
    xbm: undefined,
    // 出生日期
    csrq: undefined,
    // 出生地码
    csdm: undefined,
    // 籍贯
    jg: undefined,
    // 户口类别码
    hklbm: undefined,
    // 户口所在地行政区划码
    hkszdxzqhm: undefined,
    // 户口所在地详细地址
    hkszdxxdz: undefined,
    // 当前住址行政区划码
    dqzzxzqhm: undefined,
    // 当前住址详细地址
    dqzzxxdz: undefined,
    // 当前住址邮政编码
    dqzzyzbm: undefined,
    // 民族码
    mzm: undefined,
    // 国籍/地区码
    gjdqm: undefined,
    // 身份证件类型码
    sfzjlxm: undefined,
    // 身份证件号
    sfzjh: undefined,
    // 婚姻状况码（中小学不用填写）
    hyzkm: undefined,
    // 港澳台侨外码
    gatqwm: undefined,
    // 信仰宗教码
    xyzjm: undefined,
    // 血型码
    xxm: undefined,
    // 照片
    zp: undefined,
    // 是否独生子女
    sfdszn: undefined,
    // 联系电话
    lxdh: undefined,
    // 宅电
    zd: undefined,
    // 人员号
    ryh: undefined,
    // 创建时间
    createTime: undefined,
    // 更新时间
    updateTime: undefined,
    // 创建用户
    createUserId: undefined,
    // 更新用户
    updateUserId: undefined,
  },
},
);
// 表单验证规则
const rules = reactive({
  'PersonnelBasic.dqzzxzqhm': [
  ],
  'PersonnelBasic.dqzzxxdz': [
  ],
  'PersonnelBasic.dqzzyzbm': [
  ],
  'PersonnelBasic.mzm': [
  ],
  'PersonnelBasic.hkszdxxdz': [
  ],
  'PersonnelBasic.gatqwm': [
  ],
  'PersonnelBasic.gjdqm': [
  ],
  'PersonnelBasic.sfzjlxm': [
  ],
  'PersonnelBasic.sfzjh': [
  ],
  'PersonnelBasic.hyzkm': [
  ],
  'PersonnelBasic.zp': [
  ],
  'PersonnelBasic.sfdszn': [
  ],
  'PersonnelBasic.xm': [
  ],
  'PersonnelBasic.lxdh': [
  ],
  'PersonnelBasic.ywxm': [
  ],
  'PersonnelBasic.zd': [
  ],
  'PersonnelBasic.xyzjm': [
  ],
  'PersonnelBasic.xxm': [
  ],
  'PersonnelBasic.hklbm': [
  ],
  'PersonnelBasic.hkszdxzqhm': [
  ],
  'PersonnelBasic.xbm': [
  ],
  'PersonnelBasic.ryh': [
  ],
  'PersonnelBasic.csrq': [
  ],
  'PersonnelBasic.csdm': [
  ],
  'PersonnelBasic.jg': [
  ],
});
const instance = getCurrentInstance();

const onCancel = () => {
  if (props.dialog) {
    props.dialog.cancel();
  }
};

const isEdit = computed(() => {
  return props.saveOnSubmit ? props.id != null : props.rowData != null;
});

// 初始化页面数据
const loadPersonnelBasicData = () => {
  return new Promise<void>((resolve, reject) => {
    if (!isEdit.value) {
      resolve();
      return;
    }
    if (!props.saveOnSubmit && props.rowData != null) {
      formData.PersonnelBasic = JSON.parse(JSON.stringify(props.rowData));
      resolve();
      return;
    }
    let params: ANY_OBJECT = {
      id: props.id
    };
    PersonnelBasicController.view(params).then(res => {
      formData.PersonnelBasic = { ...res.data };
      resolve();
    }).catch(e => {
      reject(e);
    });
  });
};
/**
 * 照片上传文件改变
 */
const onZpChange = val => {
  formData.PersonnelBasic.zp = fileListToJson(val);
};
// 照片上传文件组件
const zpWidget = useUploadWidget(1);
const { fileList: zpWidgetFileList, maxCount: zpWidgetMaxCount } = zpWidget;
const onUploadError = () => {
  ElMessage.error('文件上传失败');
};
const onUploadLimit = () => {
  ElMessage.error('已经超出最大上传个数限制');
};
const refreshFormEditPersonnelBasic = () => {
  // 刷新段落
};
/**
 * 重置过滤值
 */
const resetFormEditPersonnelBasic = () => {
  refreshFormEditPersonnelBasic();
};
/**
 * 重置所有过滤值
 */
const resetFilter = () => {
  resetFormEditPersonnelBasic();
};
/**
 * 保存
 */
const onSubmitPersonnelBasicClick = () => {
  formEditPersonnelBasicRef.value.validate((valid) => {
    if (!valid) return;
    // 级联操作
    if (!props.saveOnSubmit) {
      let retFormData = {
        ...formData.PersonnelBasic
      };
  props.dialog?.submit(retFormData);
      return;
    }
    let params: ANY_OBJECT = {
      personnelBasicDto: {
        id: formData.PersonnelBasic.id,
        xm: formData.PersonnelBasic.xm,
        ywxm: formData.PersonnelBasic.ywxm,
        xbm: formData.PersonnelBasic.xbm,
        csrq: formData.PersonnelBasic.csrq,
        csdm: formData.PersonnelBasic.csdm,
        jg: formData.PersonnelBasic.jg,
        hklbm: formData.PersonnelBasic.hklbm,
        hkszdxzqhm: formData.PersonnelBasic.hkszdxzqhm,
        hkszdxxdz: formData.PersonnelBasic.hkszdxxdz,
        dqzzxzqhm: formData.PersonnelBasic.dqzzxzqhm,
        dqzzxxdz: formData.PersonnelBasic.dqzzxxdz,
        dqzzyzbm: formData.PersonnelBasic.dqzzyzbm,
        mzm: formData.PersonnelBasic.mzm,
        gjdqm: formData.PersonnelBasic.gjdqm,
        sfzjlxm: formData.PersonnelBasic.sfzjlxm,
        sfzjh: formData.PersonnelBasic.sfzjh,
        hyzkm: formData.PersonnelBasic.hyzkm,
        gatqwm: formData.PersonnelBasic.gatqwm,
        xyzjm: formData.PersonnelBasic.xyzjm,
        xxm: formData.PersonnelBasic.xxm,
        zp: formData.PersonnelBasic.zp,
        sfdszn: formData.PersonnelBasic.sfdszn,
        lxdh: formData.PersonnelBasic.lxdh,
        zd: formData.PersonnelBasic.zd,
        ryh: formData.PersonnelBasic.ryh,
        createTime: formData.PersonnelBasic.createTime,
        updateTime: formData.PersonnelBasic.updateTime,
        createUserId: formData.PersonnelBasic.createUserId,
        updateUserId: formData.PersonnelBasic.updateUserId,
      }
    };

    let httpCall = isEdit.value ? PersonnelBasicController.update : PersonnelBasicController.add;
    httpCall(params).then(res => {
      ElMessage.success('保存成功');
      props.dialog?.submit();
    }).catch(e => {
      // TODO: 异常处理
      console.error(e);
    });
  });
};
const formInit = () => {
  loadPersonnelBasicData().then(res => {
    let zpDownloadParams = {
      id: formData.PersonnelBasic.id,
      fieldName: 'zp',
      asImage: false
    };
    zpWidgetFileList.value = parseUploadData(formData.PersonnelBasic.zp, zpDownloadParams);
    if (isEdit.value) refreshFormEditPersonnelBasic();
  }).catch(e => {
    // TODO: 异常处理
    console.error(e);
  });
};

onMounted(() => {
  formInit();
});
</script>
